<template>
  <div>
    <el-dialog
      class="add-new-item-dialog"
      title="新增评分项"
      :visible.sync="addNewItemDialog.showDialog"
      width="40%"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <div class="item-name-wrap">
        评分项名称：
        <el-input placeholder="名称" v-model="addNewItemDialog.itemName"></el-input>
      </div>
      <div class="item-score-wrap">
        设置分值
        <el-input-number
          v-model="addNewItemDialog.itemScore"
          :min="1"
          :max="addNewItemDialog.maxItemScore"
          label="描述文字"
        ></el-input-number>
      </div>
      <div class="item-type-wrap">
        评分项类型
        <el-select v-model="addNewItemDialog.itemType" placeholder="请选择">
          <el-option label="直接填分数" :value="0" />
          <el-option label="单选" :value="1" />
        </el-select>
      </div>
      <div class="item-desc">
        评分项备注
        <el-input type="textarea" :rows="2" placeholder="评分项描述" v-model="addNewItemDialog.itemDesc"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addNewItemDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitNewScoreItem">确 定</el-button>
      </span>
    </el-dialog>
    <div class="button-row">
      <el-button type="primary" @click="goToModelManagePage">返回</el-button>
      <el-button type="success" @click="addNewScoreItem">新增评分子项</el-button>
    </div>
    <h2 class="model-name">{{modelItemInfo.modelName}}</h2>
    <div class="info-row">
      <el-card class="box-card total-score">总分：{{modelItemInfo.totalScore}}分</el-card>
      <el-card class="box-card">未分配： {{modelItemInfo.remainScore}}分</el-card>
    </div>
    <div class="item-table">
      <item-table
        @item-pos-change="modelItemPosChange"
        :modelTotalScore="modelItemInfo.totalScore"
        :itemList="modelItemInfo.scoreModelItemDetailVoList"
        :modelId="id"
      ></item-table>
    </div>
  </div>
</template>
<script>
import {
  Button,
  Card,
  Dialog,
  Input,
  InputNumber,
  Select,
  Option
} from "element-ui";
import { getScoreModelItemInfo, addScoreModelItem } from "@/api/score.js";
import ItemTable from "./components/ItemTable.vue";
export default {
  name: "score-model-item",
  components: {
    ItemTable,
    [Button.name]: Button,
    [Card.name]: Card,
    [Dialog.name]: Dialog,
    [Input.name]: Input,
    [InputNumber.name]: InputNumber,
    [Select.name]: Select,
    [Option.name]: Option
  },
  data() {
    return {
      id: null,
      modelItemInfo: {
        modelId: null,
        modelName: null,
        remainScore: null,
        scoreModelItemDetailVoList: [],
        totalScore: null
      },
      addNewItemDialog: {
        showDialog: false,
        itemName: null,
        itemScore: null,
        maxItemScore: null,
        itemType: null,
        itemDesc: null
      }
    };
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getModelInfo();
  },
  methods: {
    modelItemPosChange() {
      this.getModelInfo();
    },
    goToModelManagePage() {
      this.$router.push({ path: "/score-model" });
    },
    getModelInfo() {
      getScoreModelItemInfo(this.id)
        .then(res => {
          this.modelItemInfo = res;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    addNewScoreItem() {
      if (this.modelItemInfo.remainScore < 1) {
        this.$alert("分数已分配完毕，无法新增");
        return;
      }
      this.addNewItemDialog.showDialog = true;
      this.addNewItemDialog.itemName = null;
      this.addNewItemDialog.itemScore = 1;
      this.addNewItemDialog.itemType = 1;
      this.addNewItemDialog.maxItemScore = this.modelItemInfo.totalScore;
      this.addNewItemDialog.itemDesc = null;
    },
    submitNewScoreItem() {
      addScoreModelItem({
        modelId: this.modelItemInfo.modelId,
        itemName: this.addNewItemDialog.itemName,
        itemScore: this.addNewItemDialog.itemScore,
        itemType: this.addNewItemDialog.itemType,
        itemDesc: this.addNewItemDialog.itemDesc
      })
        .then(res => {
          this.getModelInfo();
          this.addNewItemDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    }
  }
};
</script>
<style lang="stylus" scoped>
.button-row {
  padding-left: 5px;
  padding-top: 5px;
}

.model-name {
  padding-left: 10px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 5px;
}

.add-new-item-dialog {
  .item-name-wrap {
    .el-input {
      width: 300px;
    }

    margin-bottom: 3px;
  }

  .item-score-wrap {
    .el-input-number {
      width: 300px;
      margin-left: 28px;
    }

    margin-bottom: 3px;
  }

  .item-type-wrap {
    .el-select {
      width: 300px;
      margin-left: 14px;
    }

    margin-bottom: 3px;
  }
}

.info-row {
  padding-left: 10px;

  .el-card {
    width: 300px;
    margin-right: 50px;
    float: left;

    &.total-score {
      color: red;
    }
  }
}

.item-table {
  clear: both;
  padding-top: 20px;
  padding-left: 5px;
}
</style>